<ion-header>
  <ion-navbar no-border-bottom>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>

    <ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()">
      <ion-segment-button value="all">
        All
      </ion-segment-button>
      <ion-segment-button value="favorites">
        Favorites
      </ion-segment-button>
    </ion-segment>

    <ion-buttons end>
      <button (click)="presentFilter()">
        <ion-icon ios="ios-options-outline" md="md-options"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

  <ion-toolbar no-border-top>
    <ion-searchbar primary
                   [(ngModel)]="queryText"
                   (ionInput)="updateSchedule()"
                   placeholder="Search">
    </ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list #scheduleList [hidden]="shownSessions === 0">

    <ion-item-group *ngFor="let group of groups" [hidden]="group.hide">

      <ion-item-divider sticky>
        {{group.time}}
      </ion-item-divider>

      <ion-item-sliding *ngFor="let session of group.sessions" #slidingItem [attr.track]="session.tracks[0] | lowercase" [hidden]="session.hide">

        <button ion-item (click)="goToSessionDetail(session)">
          <h3>{{session.name}}</h3>
          <p>
            {{session.timeStart}} &mdash;
            {{session.timeEnd}}:
            {{session.location}}
          </p>
        </button>

        <ion-item-options>
          <button favorite (click)="addFavorite(slidingItem, session)" *ngIf="segment === 'all'">
            Favorite
          </button>
          <button danger (click)="removeFavorite(slidingItem, session, 'Remove Favorite')" *ngIf="segment === 'favorites'">
            Remove
          </button>
        </ion-item-options>

      </ion-item-sliding>

    </ion-item-group>

  </ion-list>

  <ion-list-header [hidden]="shownSessions > 0">
      No Sessions Found
  </ion-list-header>


</ion-content>
